<template>
  <div v-loading="loading" element-loading-text="努力加载中...">
    <div class="user_info_box">
      <el-card style="width: 300px">
        <el-avatar style="width: 200px; height: 200px" fit="contain"
                   :src="$img+myInfo?.avatar"></el-avatar>
        <el-upload
            :action="$upFile"
            :limit="1"
            :data="fileInfoVo"
            name="files"
            :headers="getHeader"
            :on-success="getUpFileId"
        >
          <el-button color="#098CC0">点击更换头像</el-button>
        </el-upload>
      </el-card>
      <el-card style="margin-left: 20px">
        <el-form :model="myInfo" label-width="80">
          <el-form-item label="昵称">
            <el-input v-model="myInfo.userNickname"></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="myInfo.userName"></el-input>
          </el-form-item>
          <el-form-item label="个性标签">
            <el-input v-model="myInfo.personality"></el-input>
          </el-form-item>
          <el-form-item label="职业">
            <el-input v-model="myInfo.occupation"></el-input>
          </el-form-item>
          <el-form-item label="绑定邮箱">
            <el-input v-model="myInfo.email">
              <template #suffix>
                <el-text @click="getVerifyEmailCode">获取验证码</el-text>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码">
            <el-input v-model="myInfo.code"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="myInfo.gender">
              <el-radio :label="0" size="large">男</el-radio>
              <el-radio :label="1" size="large">女</el-radio>
              <el-radio :label="2" size="large">保密</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出生日期">
            <div class="block">
              <el-date-picker
                  v-model="myInfo.birthDay"
                  type="datetime"
                  placeholder="请选择出生日期"
              />
            </div>
          </el-form-item>
          <el-form-item>
            <el-button @click="updateByMyself" color="#098CC0" style="width: 100%">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {getMyInfoApi, updateByMyselfApi, getVerifyEmailCodeApi} from '@/api/user'
import {onMounted, ref} from "vue";
import {getToken} from "@/util/token/tokenUtil";

let loading = ref(true)
let myInfo = ref({})
const fileInfoVo = {
  bucketName: 'user',
  folderName: 'avatar',
}

function getMyInfo() {
  getMyInfoApi().then(res => {
    myInfo.value = res.data
    myInfo.value.code = ''//验证码值
    loading.value = false
  })
}

/**
 * 头像上传后获取响应的文件id
 * @param res
 */
function getUpFileId(res) {
  myInfo.value.avatar = res.data
}

function getHeader() {
  return {'token': getToken('token')};
}

function updateByMyself() {
  updateByMyselfApi(myInfo.value)
}

/**
 * 获取验证码
 */
function getVerifyEmailCode() {
  getVerifyEmailCodeApi(myInfo.value.email)
}

onMounted(() => {
  getMyInfo()
})

</script>

<style scoped>
.user_info_box {
  text-align: center;
  display: flex;
  justify-content: start;
}
</style>
